import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'

import Table from './Table'
import NavLink from './NavLink'

import { myAjax, ROOTURL } from './../publicAPI/publicAPI'

class WalletRecord extends Component {

    constructor(props, context) {
        super(props, context)
        console.log("初始化")
        this.state = {
           personRecordInfo:[],
         
        };// 初始化状态
        this.page=0;
        this.start=0;
    }

    componentWillMount() {
         console.log("将安装", this.props.params.id);
         let id=this.props.params.id;
         let params={
             "where":{
             
              "wallet":{
                       "id":[
                             ["eq",id]
                       ]
               },

                "dd":[
                    ["eq",false]

                ],
            },
               "order":
                [           // ORDER BY  
                        ["id", "DESC"],    
             
                ],
              "limit":10
                
                
               

             
            
        }
        fetch(ROOTURL+'/wallet/record/search.api',{
                method: 'post',
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                },
        
                body:JSON.stringify(params)
        }).then(response=>{return response.json()})
        .then(data=>{
             if(data.length<10)
                   document.getElementsByClassName("next")[0].style.display="none";
            this.setState({
            personRecordInfo:data
            });

        }
            //console.log(data);
        )
       
    }

    componentDidMount() {
        console.log("安装成功")
    }


    
    

    handlePageClick(e) { //1为下一页，2为上一页
        let _buttonValue = e.target.value;
        let id=this.props.params.id;
        let next=document.getElementsByClassName("next")[0];
        let prev=document.getElementsByClassName("prev")[0];
        let _this=this;
      
       
        if (_buttonValue == 1) {
          
          this.start=this.start+9;
          this.page++;
          prev.style.display="block";

        } else {
          this.start=this.start-9;
          this.page--;
          next.style.display="block";
        }
        console.log(this.page);
         
         let params={
             "where":{
             
              "wallet":{
                       "id":[
                             ["eq",id]
                       ]
               },

                "dd":[
                    ["eq",false]

                ],

            },
                 "order":
                [           // ORDER BY  
                        ["id", "DESC"],    
             
                ],
                "start":this.start,
                "limit":10
                
        }
        fetch(ROOTURL+'/wallet/record/search.api',{
                method: 'post',
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                },
        
                body:JSON.stringify(params)
        }).then(response=>{return response.json()})
        .then(data=>{
            if(data.length<10)
                    next.style.display="none";
            this.setState({
            personRecordInfo:data
            });
        }
            //console.log(data);
        )
        if(this.page==1){
       
            prev.style.display="none";
        }

        
        

    }


    ChangeTimeToString(date){
        let sjdat=new Date(date);

        let year=sjdat.getFullYear();

        let  month=sjdat.getMonth()+1;

        let  day=sjdat.getDate();



        return year+"-"+month+"-"+day;


    }

    tHead() {
        var data = [
            {name: "日期"},
            {name: "类型"},
            {name: "金额"},
            {name: "备注"},
            
        ];
        const _headArr = [];
        const _width = {
            "0":"25%",
            "1":"25%",
            "2":"25%",
            "3":"25%",
         
        };
       
        _headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1"
                                                    key={index}>{item.name}</th>));
        return _headArr;
    }

    tBody() {
        let _data = this.state.personRecordInfo;
        let _this=this;
        if(_data.length==0)
            return(<tr><td>暂无记录</td></tr>);
        else
        return _data.map((item) => <tr key = {item.id} >

                     < td > {_this.ChangeTimeToString(item.tmCreate)}< /td> 
                     < td > { item.category } < /td > 
                     < td > { item.alter} < /td> 
                     < td > { item.note } < /td >
        </tr>);
    }
    
    render() {
        
        return (
            	<div className="right-wapper" style={{height: this.state.rHeight}}>
	    	
	    		<div className="rt-wrap">
	    			<h3 className="catagory">
	    				<span className="cata-title">充值和使用记录列表</span>
	    				<button className="next" value="1" onClick={(e) => this.handlePageClick(e)}></button>
	    				<button style={{display:'none'}}  className="prev" value="2" onClick={(e) => this.handlePageClick(e)}></button>
	    			</h3>
	    			<Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()}/>
	    		</div>
	    		
	    	</div>

        )
    }
}

export default WalletRecord
